<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 引入外部头文件 -->
    <include file="layout/header" />
    <!-- 当前文件定制 -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css">
    <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/select.bootstrap.min.css"> -->
    <!-- ／定制结束 -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini ">
    <div class="wrapper">
        <!-- 菜单 -->
        <include file="layout/menu" name="超级管理员" />
        <!-- ／导航菜单 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>用户管理<small>帐号管理</small></h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">管理</a></li>
                    <li class="active">用户</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-md-3 col-lg-3">
                        <!-- box -->
                        <div class="box">
                            <div class="box-header">
                                <h3 class="box-title">添加用户</h3>
                            </div>
                            <div class="box-body">
                                <div class="col-xs-12">
                                    <div class="form-group has-feedback">
                                        <input type="text" class="form-control" placeholder="账号名" name="account" required>
                                        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <input type="password" class="form-control" placeholder="密码" name="password" required>
                                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <input type="password" class="form-control" placeholder="确认密码" required>
                                        <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="type" id="type1" value="option1" checked="">普通管理员
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="type" id="type2" value="option2">超级管理员
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <button type="submit" class="btn btn-primary">添加</button>
                            </div>
                        </div>
                        <!-- ./box -->
                    </div>
                    <div class="col-md-9 col-lg-9">
                        <div class="box">
                            <div class="box-header">
                                <h3 class="box-title">用户账户表</h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="input-group col-xs-6">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-primary" id="delete"><i class="glyphicon glyphicon-trash"></i>删除选中项</button>
                                        <button type="button" class="btn btn-primary">Action</button>
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="caret"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li role="separator" class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <input type="text" class="form-control" aria-label="...">
                                </div>
                                <table id="userlist" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th style="width:15px">
                                                <input type="checkbox" id="selectAll">
                                            </th>
                                            <th>#</th>
                                            <th class="select-filter">账号名</th>
                                            <th>昵称</th>
                                            <th>创建时间</th>
                                            <th>等级</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <volist name="list" id="vo" empty="暂时没有数据">
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checklist">
                                                </td>
                                                <td>{$i}</td>
                                                <td>{$vo.name}</td>
                                                <td>{$vo.account}</td>
                                                <td>{$vo.datetime}</td>
                                                <td>
                                                    <switch name="vo.level">
                                                        <case value="1">
                                                            <!-- <i class="text-green glyphicon glyphicon-bishop"></i> -->
                                                            <span class="badge bg-red">2级</span>
                                                            <span class="label label-success">32323</span>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                                            </div>
                                                        </case>
                                                        <case value="2">
                                                            <!-- <i class="text-yellow glyphicon glyphicon-queen"></i> -->
                                                            <span class="badge bg-blue">3级</span>
                                                            <span class="label label-info">32323</span>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                                            </div>
                                                        </case>
                                                        <case value="3">
                                                            <!-- <i class="text-red glyphicon glyphicon-king"></i> -->
                                                            <span class="badge bg-blue">4级</span>
                                                            <span class="label label-info">32323</span>
                                                            <div class="progress progress-xs">
                                                                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                                            </div>
                                                        </case>
                                                        <default />
                                                        <!-- <i class="text-info glyphicon glyphicon-pawn"></i> -->
                                                        <span class="badge bg-blue">1级</span>
                                                        <span class="label label-info">32323</span>
                                                        <div class="progress progress-xs">
                                                            <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                                        </div>

                                                    </switch>
                                                </td>
                                                <td><a href="__APP__/Home/Superuser/User/checkUserProfile/userid/{$vo.user_id}" target="_blank">详情</a></td>
                                            </tr>
                                        </volist>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>
            </section>
        </div>
        <!-- /.col -->
        <include file="layout/copyright" />
    </div>
    <!-- /.content-wrapper -->
    </div>
    <!-- ./wrapper -->
    <!-- REQUIRED JS SCRIPTS -->
    <!-- 外头文件 -->
    <include file="layout/footer" />
    <!-- 当前定制 -->
    <script src="__PUBLIC__/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="__PUBLIC__/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- DOM 操作 -->
    <script>
    $(document).ready(function() {
        function addSelectInfo() {
            if ($(".dataTables_info").find('.selectInfo').size() > 0);
            else {
                $(".dataTables_info").append("<span class='selectInfo'></span>");
            }
            $('.selectInfo').html("&nbsp;&nbsp;共" + $('.checklist:checked').size() + "项选中");
        }

        function checkSelectAll() {
            if ($('.checklist').size() == $('.checklist:checked').size()) {
                $("#selectAll").prop('checked', true);
            } else {
                $('#selectAll').prop('checked', false);
            }
            addSelectInfo();
        }

        var table = $('#userlist').DataTable({
            "dom": 'lrtip',
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": true,
            "bFilter": true,
            "columnDefs": [{
                orderable: false,
                targets: 0
            }, {
                orderable: false,
                targets: 1
            }, {
                orderable: false,
                targets: 2
            }], //第一列与第二列禁止排序
            "order": [
                [0, null]
            ],
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "搜索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            },
            initComplete: function() {
                var api = this.api();
                api.columns().indexes().flatten().each(function(i) {
                    if (i != 0 && i != 1) {
                        var column = api.column(i);
                        // var $span = $('<span class="addselect">▾</span>').appendTo($(column.header()))
                        var select = $('<select><option value="">All</option></select>')
                            .appendTo($(column.header()))
                            .on('change', function(evt) {
                                evt.stopPropagation();
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                console.log(val);
                                column.search(val, true, false)
                                    .draw();
                            });
                        column.data().unique().sort().each(function(d, j) {
                            function delHtmlTag(str) {
                                return $.trim(str.replace(/<[^>]+>/g, "")); //去掉html标签
                            }
                            d = delHtmlTag(d)
                                // if(d!='')
                            select.append('<option value="' + d + '">' + d + '</option>')
                                // $span.append(select)
                        });
                    }
                });
            }
        });

        $('#userlist tbody').on('click', 'tr', function(e) {
            stopBubble(e);
            var checkbox = $(this).find("input[type=checkbox]").eq(0);
            if (checkbox != undefined) {
                checkbox.prop('checked', !checkbox.prop('checked'));
                if (checkbox.prop('checked')) $(this).addClass('selected');
                else $(this).removeClass('selected');
            }
            checkSelectAll();
        });

        $('.checklist').on('click', function(e) {
            stopBubble(e);
            checkSelectAll();
            var tr = $(this).parent().parent();
            if ($(this).prop('checked')) tr.addClass('selected');
            else tr.removeClass('selected');
        });

        $("#selectAll").on('click', function(e) {
            stopBubble(e);
            $('.checklist').prop('checked', $(this).prop('checked'));
            var tr = $('.checklist').parent().parent();
            if ($(this).prop('checked')) tr.addClass('selected');
            else tr.removeClass('selected');
            addSelectInfo();
        });

        $('#delete').click(function() {
            // alert( table.rows('.selected').data().length +' row(s) selected' );
            console.log(table.rows('.selected').data());
        });


    });
    </script>
    <!-- ./DOM -->
    <!-- AJAX -->
    <script type="text/javascript">
    $(document).ready(function() {

    });
    </script>
    <!-- /AJAX -->
    <!-- ./定制结束 -->
</body>

</html>